// 点击回到顶部
let backTop = document.querySelector(".footer-main>div>a");
backTop.onclick = function (e) {
  e.preventDefault();
  let distans = document.documentElement.scrollTop;
  let distansControl = setInterval(function () {
    distans -= 10;
    document.documentElement.scrollTop = distans;
    if (distans <= 0) {
      clearInterval(distansControl);
    }
  }, 3);
};

//获取本地浏览器数据
let categoryId = localStorage.getItem("categoryId");
categoryId = Number(categoryId);
// localStorage.removeItem("categoryId")

const getCategoryName = () =>
  ajax({
    url: "http://chst.vip:1234/api/getcategorybyid",
    data: { categoryid: categoryId },
  });

const getCategoryList = (num = 1) =>
  ajax({
    url: "http://chst.vip:1234/api/getproductlist",
    data: { categoryid: categoryId, pageid: num },
  });

let categoryName = document.querySelector("#categoryName");
//请求数据库
getCategoryName()
  .then((res) => {
    //渲染三级菜单
    categoryName.innerText = res.result[0].category;
    console.log(res);
    return getCategoryList();
  })
  .then((res) => {
    bijiaDraw(res);
    //第一次创建下拉列表
    // console.log(res);
    let pageNum = Math.ceil(res.totalCount / 10);
    let pageHtml = "";
    for (let i = 0; i < pageNum; i++) {
      pageHtml += `
        <option value="">${i + 1}/${pageNum}</option>
        `;
    }
    let pageSelect = document.querySelector("#pageSelect");
    pageSelect.innerHTML = pageHtml;
  });

//下拉列表点击事件
pageSelect.onchange = pageCrontrul;
//控制页面渲染哪一页
function pageCrontrul() {
  let pageOption = pageSelect.children;
  for (let i = 0; i < pageOption.length; i++) {
    if (pageSelect[i].selected == true) {
      getCategoryList(i + 1).then((res) => {
        bijiaDraw(res);
        document.documentElement.scrollTop = 0;
        //判断页数，控制下翻页功能的禁用和启用
        if (i + 1 == pageOption.length) {
          downPage.disabled = true;
          upPage.disabled = false;
        }else if(i + 1 == 1){
          upPage.disabled = true;
          downPage.disabled = false;
        }else{
          upPage.disabled = false;
          downPage.disabled = false;
        }
      });
    }
  }
}

let pageOption = pageSelect.children;
let upPage = document.querySelector(".upPage");
let downPage = document.querySelector(".downPage");
//默认向上翻页功能第一页时是禁用
upPage.disabled = true;

//翻页功能
downPage.onclick = function () {
  let pageNum;
  for (let i = 0; i < pageOption.length; i++) {
    if (pageSelect[i].selected == true) {
      pageNum = i + 1;
      break;
    }
  }
  upPage.disabled = false;
  if (pageNum == pageOption.length - 1) {
    downPage.disabled = true;
  }

  pageSelect[pageNum].selected = true;
  getCategoryList(pageNum + 1).then((res) => {
    bijiaDraw(res);
  });
};

upPage.onclick = function () {
  let pageNum;
  for (let i = 0; i < pageOption.length; i++) {
    if (pageSelect[i].selected == true) {
      pageNum = i;
      break;
    }
  }

  downPage.disabled = false;
  if (pageNum == 1) {
    upPage.disabled = true;
  }

  pageSelect[pageNum - 1].selected = true;
  getCategoryList(pageNum).then((res) => {
    bijiaDraw(res);
  });
};

// 渲染主体界面
function bijiaDraw(res) {
  let arr = res.result;
  let html = "";
  arr.forEach((item) => {
    html += `
      <div productid=${item.productId}>
          ${item.productImg}
          <div>
            <p>${item.productName}</p>
            <p>${item.productPrice}</p>
            <p><span>${item.productQuote}</span> <span>${item.productCom}</span></p>
          </div>
       </div>
      `;
  });
  let manman = document.querySelector(".main-main");
  manman.innerHTML = html;
  //创建主体div中的点击事件，并query传参
  [...manman.children].forEach((item) => {
    item.onclick = function () {
      let productid = this.getAttribute("productid");
      location.href = `productlist.html?productid=${productid}&bigName=${categoryName.innerText}`;
    };
  });
}
